<template>
	<mu-container style="background-color: #FFFFFF;padding: 0px;">
		<top-nav bgColor="#FFFFFF" title="专业详情" btnName="主页" :rightShow="true" returnPath="上一级" @rightDo="backHome" style="z-index: 100;"></top-nav>
		<section style="height: 3rem;"></section>
		<div class="professionBox">
			<h2 style="color: dodgerblue;margin-top: 10px;margin-bottom: 10px;">哲学</h2>
			<p>所属层级:本科</p>
			<p>专业大类:哲学类</p>
			<div class="littleBox">
				<p>职业性格匹配</p><span>:点我测试</span>
				<img src="../../static/images/蓝色问号.jpg" />
			</div>
		</div>
		<section style="height: 0.5rem;background-color:#F9F9F9;"></section>
		<!--专业简介-->
		<div class="divBox">
			<p>专业介绍</p>
		</div>
		<div id="content" class="content">
			<p>9月8日，吴小姐一家和朋友去西溪印象城吃饭，找了个吃火锅的餐馆坐下桌子靠着木制隔断墙， 吴小姐将11个月大的孩子放在最里面的位置，心想靠着隔断墙，这样安全点
			</p>
			<p>吴小姐先把孩子喂饱，然后随他自己在位子上玩快吃完时，吴小姐突然发现孩子嘴边有淡黄色粉末状物体，还在砸吧着嘴巴</p>
			<p>品尝味道 我没给他喂过这东西啊吴小姐大脑立马一阵搜索，看孩子手上也有类似粉状，再放眼一看，餐桌侧边的隔断墙缝里， 有一小堆淡黄色粉末，像佐料像木屑 我一开始以为是木屑，后来才发现不是就算是那个时候，吴小姐也没想到这黄色粉末是杀蟑螂的药粉
			</p>
			<p>吴小姐叫来了服务员问：这是什么东西，我想知道我孩子吃了什么？ 服务员警觉地啊了一声，接着让吴小姐稍等一下，他说要去问店长，他也不知道是什么东西 服务员的这一声啊，让吴小姐及朋友非常紧张
			</p>
			<p>孩子吃下去的黄色粉末是杀虫剂 当晚就进了抢救室 等不及店长的回复，吴小姐带着孩子赶到省儿童医院一到医院，孩子马上被送到抢救室
			</p>
			<p>医生问孩子吃了什么？ 吴小姐说，不知道她拿出从现场取的一点粉末让医生看，但医生无法辨别，他说必须尽快知道这种东西的属性才能治疗 9月8日晚上9点多，吴小姐收到了店长发来的图片，称这是一种杀虫饵剂，用来防止蜚蠊蚂蚁，有效成分及含量是：乙酰甲胺磷/acephate 1.5%</p>
			<p>医生看了图片后说，孩子要洗胃 11个月大的孩子就要洗胃，吴小姐跟老公发生了争执：我老公觉得11个月大的孩子不应该承受这种痛苦，但对我来说，我是一个母亲， 如果我们不洗胃了，我不知道第二天会怎么样，我不敢冒这个险
			</p>
			<p>吴小姐说她虽然无法确切说出乙酰甲胺磷是什么，但是甲胺磷她还是听说过的：那是一种农药啊，有毒的啊 最后吴小姐坚持洗胃，四个大人一边哭一边按着孩子，配合医生给孩子洗胃
			</p>
			<p>现在三天过去了，所幸孩子目前没有出现其余症状，已出院回家</p>
		</div>
		<div id="get_ct_more" class="get_ct_more">
			<p style="font-size: 3.4vw;color: dodgerblue;" id="more_bt" @click="showAll()">展开全部</p>
		</div>
		<section style="height: 0.5rem;background-color:#F9F9F9;"></section>
		<!--在线介绍-->
		<p style="margin-bottom: 5px;">在线介绍</p>
		<div id="selectPage">
			<section v-for="item in universitys" style="padding-top: 0px;padding-bottom: 0px;">
				<mu-list textline="two-line" @click="gotoVipSchool(item)">
					<mu-list-item avatar :ripple="true" button>
						<mu-list-item-action>
							<mu-avatar>
								<img v-bind:src="idSchoolImg" />
							</mu-avatar>
						</mu-list-item-action>
						<mu-list-item-content>
							<mu-list-item-title>
								<span class="schoolTitle">{{item.nameForShow}}</span>
								<div style="position: absolute;left: 78%;display: inline-block;">
									<span class="schoolTitle" style="color: rgba(0, 0, 0, .87);"> {{item.predictor}}</span>
								</div>
							</mu-list-item-title>
							<mu-list-item-sub-title>
								<div style="margin-top: 8px;">
									<div style="color: #C5C5C5;display: inline-block;">
										<span class="schoolMessage" style="color: #C4C400;">学校代码:{{item.code}}</span>
										<span class="schoolMessage">{{item.nature}}</span>
										<span class="schoolMessage">{{item.cities}}</span>
									</div>
									<div style="position: absolute;left: 74%;display: inline-block;">
										<span class="schoolMessage">模拟录取线</span>
										<div class="right-arrow" style="display: inline-block;position: relative;left: 14px;bottom: 18px;"></div>
									</div>
								</div>
							</mu-list-item-sub-title>
						</mu-list-item-content>
					</mu-list-item>
					<mu-divider></mu-divider>
				</mu-list>
			</section>
		</div>
	</mu-container>
</template>

<script>
	export default {
		data() {
			return {
				idSchoolImg: "../../static/images/touxiang4.jpg ",
				searchitem: '',
				professioneName: '',
				idNature: "公办",
				idLevel: "专科",
				idCategory: "普通",
				idArea: "全部",
				idWenlike: "理科",
				idLearnType: "普通",
				idProvince: "",
				idRegion: "全部",
				idCity: "全部",
				isShandong: "",
				universitys: [{
						code: "A430",
						name: "山东建筑大学",
						predictor: 442,
						cities: "济南",
						nature: '公办',
						nameForShow: "山东建筑大学",
					},
					{
						code: "E100",
						name: "山东政法学院",
						predictor: 422,
						cities: "济南",
						nature: '公办',
						nameForShow: "山东政法学院",
					}
				],
			};
		},
		mounted() {
			//			this.idNature = storage["idNature"]
			//			this.idCategory = storage["idCategory"]
			//			this.idLevel = storage["idLevel"]
			//			this.idLearnType = storage["idLearnType"]
			//			this.isShandong = storage["isShandong"]
			//			this.idProvince = storage["idProvince"]
			//			this.idArea = storage["idArea"]
		},
		methods: {
			showAll() {
				var btn = document.getElementById('get_ct_more');
				var obj = document.getElementById('content');
				var total_height = obj.scrollHeight; //文章总高度
				var show_height = 150; //定义原始显示高度
				if(total_height >= show_height) {
					btn.style.display = 'block';
					btn.onclick = function() {
						obj.style.height = total_height + 'px';
						document.getElementById("more_bt").innerHTML = '收起文章'
					}
				}
				if(document.getElementById("more_bt").innerHTML == '收起文章') {
					btn.style.display = 'block';
					btn.onclick = function() {
						obj.style.height = '150' + 'px';
						document.getElementById("more_bt").innerHTML = '展开全部'
					}
				}
			},
			backHome() {
				this.$router.push('/vip_selectPage')
			},
			gotoVipSchool(school) {
				this.$router.push({
					name: 'vip_schoolPage',
					params: {
						schoolImg: this.idSchoolImg,
						name: school.name,
						code: school.code,
						nature: school.nature,
						city: school.cities,
						level: this.idLevel,
						wenlike: this.idWenlike,
						category: this.idCategory,
						learnType: this.idLearnType,
					}
				})
			},
		},
	}
</script>

<style scoped="scoped">
	.divBox {
		width: 100%;
	}
	
	.divBox>p {
		margin: 0px;
		margin-top: 10px;
		margin-left: 5.5%;
		padding-left: 2%;
		font-size: 4.0vw;
		border-left: 3px solid dodgerblue;
		text-align: start;
	}
	
	.professionBox {
		padding-left: 5.5%;
		text-align: start;
		padding-bottom: 10px;
	}
	
	.professionBox>p {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.littleBox {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.littleBox>p {
		margin: 0px;
		display: inline-block;
	}
	
	.littleBox>span {
		color: red;
	}
	
	.littleBox>img {
		height: 15px;
		widows: 15px;
		position: relative;
		top: 2px;
	}
	
	.content {
		padding: 10px;
		font-size: 18px;
		color: #2b2b2b;
		line-height: 1.7em;
		height: 150px;
		/*初始要显示的高度*/
		overflow: hidden;
		/*关键样式：内容会被修剪，并且其余内容是不可见的。*/
		position: relative
	}
	
	.content>p {
		text-indent: 2em;
		font-size: 3.0vw;
		text-align: start;
	}
	
	.content div {
		/*获取更多内容图标div*/
		clear: both;
		min-height: 1em;
		white-space: pre-wrap;
		/*如何处理元素内的空白*/
	}
	
	.get_ct_more {
		height: 30px;
		width: 100%;
		background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0) 70%);
		margin: 0px;
	}
	
	.RadioStyle {
		background-color: #F9F9F9;
		width: 100%;
	}
	
	.RadioStyle input {
		display: none;
	}
	
	.RadioStyle label {
		border: 1px solid #00a4ff;
		padding: 2px 10px 2px 5px;
		line-height: 28px;
		min-width: 90px;
		text-align: center;
		float: left;
		margin: 2px;
		border-radius: 4px;
	}
	
	.RadioStyle input:checked+label {
		background: url(../../static/images/ico_checkon.svg) no-repeat right bottom;
		background-size: 21px 21px;
		color: #00a4ff
	}
	
	.right-arrow {
		width: 10px;
		height: 10px;
		border-top: 1px solid rgb(0, 0, 0, 0.4);
		border-right: 1px solid rgb(0, 0, 0, 0.4);
		transform: rotate(45deg);
	}
	
	.schoolTitle {
		font-weight: 500;
	}
	
	.schoolMessage {
		font-size: 3.0vw;
	}
</style>